<template>
  <a-modal
    :title="formTile + '批注'"
    :visible="true"
    width="40%"
    :footer="null"
    @cancel="reset"
  >
    <a-card>
      <a-row
        type="flex"
        justify="start"
        align="top"
      >
        <a-col :span="24">
          <a-form
            :form="form"
            @submit="handleSubmit"
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
          >
            <a-form-item label="批注">
              <a-textarea
                allow-clear
                placeholder="请输入批注"
                :rows="5"
                v-decorator="['content', { rules: [{ required: true, message: '请输入批注' }] }]"
              ></a-textarea>
            </a-form-item>

            <a-row>
              <a-col
                :span="16"
                :offset="8"
                class="info-action"
              >
                <a-button
                  type="primary"
                  @click="reset"
                >返回</a-button>
                <a-button
                  type="primary"
                  class="ml-20"
                  html-type="submit"
                  :loading="loading"
                >保存</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
import { currencyCreate, currencyUpdate, queryDetail } from '@api/pattern/index.js'
export default {
  props: {
    patternId: {
      type: [Number, String],
      default: ''
    },
    commentsId: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      current: 1,
      size: 1000,
      total: 0,
      loading: false,
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 15 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      record: null,
      formTile: '新增'
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'category' })
  },

  created() {
    console.log(111);
    const { commentsId } = this.$props
    

    if (commentsId == 0) {
      this.formTile = '新增'
    } else {
      this.formTile = '编辑'
      this.getDetail(commentsId)
    }
  },

  methods: {
    async getDetail(id) {
      const res = await queryDetail('comments', { commentsId: id })
      if (res.code == 200) {
        this.form.setFieldsValue({
          content: res.data.content
        })
      }
    },

    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      this.loading = true
      const { commentsId, patternId } = this
      const { workNo, realname } = this.userInfo
      if (commentsId) {
        values.commentsId = commentsId
      }
      values.jobNumber = workNo
      values.patternId = patternId
      const FNCName = commentsId ? currencyUpdate : currencyCreate
      try {
        const res = await FNCName('comments', values)
        if (res.code == 200) {
          let text = this.commentsId ? '编辑成功' : '新增成功'
          this.$message.success(text)
          let operate = this.commentsId ? 1 : 0
          this.reset(values, operate)
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
        this.$message.error('失败')
      } finally {
        this.loading = false
      }
    },
    reset(values, operate) {
      
      this.form.resetFields()
      this.$emit('close', values, operate)
  
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.poster {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  position: relative;
  &:hover {
    .img-modal {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
  .img-modal {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
  }
}
.fileList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.tips {
  margin-left: 5px;
  cursor: pointer;
}
</style>
